<template>
  <a-modal
    :width='modalWidth'
    :visible='visible'
    title='表达式'
    :maskClosable='false'
    :confirmLoading='confirmLoading'
    @ok='handleSubmit'
    @cancel='handleCancel'
    cancelText='关闭'
    wrapClassName='ant-modal-cust-warp'>

    <template slot='footer'>
      <a-button key='back' @click='handleCancel'>取消</a-button>
      <a-button key='submit' type='primary' @click='handleSubmit'>复制</a-button>
    </template>
    <a-textarea id='copy' v-model='expression' :autosize='{ minRows: 3}'></a-textarea>
  </a-modal>
</template>

<script>

export default {
  name: 'ActVariableGeneratingExpression',
  components: {},
  data() {
    return {
      modalWidth: 500,
      title: '操作',
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      expression: ''
    }
  },
  methods: {
    open(record) {
      this.visible = true
      // ${flowSet.getFlowDirection('节点编码','字段',字段)}
      this.expression = '${flowSet.getFlowDirection' + `('${record.processNodeCode}','${record.fieldName}',${record.fieldName})}`
    },
    handleSubmit() {
      var expre = document.getElementById('copy')
      expre.select()
      document.execCommand('copy')
      this.$message.success('复制成功！')
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
      this.expression = ''
    }
  }
}
</script>

<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>